<!DOCTYPE html>
<html>

<head lang="en">
    <title>骡窝日报</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/news.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script>
        $(function () {
          /*  $.get('/dailies',{state:1,pageSize:5},function (data) {
                $("#news").renderValues({list:data.list},{
                    setHref:function (item,value) {
                        var href = $(item).data("href"); //得到href
                        $(item).attr("href",href + value);//手动拼接跳转的url
                    }
                })

            })*/

            //分页查询需要拼接的临时变量
            var currentPage = 1;
            //解决上一1页时数据丢失的问题
            var dataList = [];
            //总页数变量
            var totalPage = 1;
            function query() {
                //查询普通状态的日报
                $.get('/dailies', {state: 1, currentPage: currentPage}, function (data) {
                    //每一次查询完将数据保存到数组中,并且合并数据
                    dataList = $.merge(dataList, data.list);

                    $("#news").renderValues({list: dataList}, {
                        setHref: function (item, value) {
                            var href = $(item).data("href"); //得到href
                            $(item).attr("href", href + value);//手动拼接跳转的url
                        }
                    })
                    //第一页数据,,,每次查询完之后页面加一
                    currentPage += 1;
                    //将第一查询的总页数封装成变量
                    totalPage = data.pages;
                })
            }
            //第一次查询
            query();
            //屏幕滚动事件
            $(window).scroll(function () {
                //触发翻页的ajax去查询
                console.log($(window).height()+"-----"+$(document).height()+"-----"+$(document).scrollTop());
                //触发翻页的时机.  屏幕高度+滚动高度>=数据的高度的时候
                if ($(window).height()+$(document).scrollTop()+10>=$(document).height()) {
                    //解决翻页底部问题,一直发送请求,如果当前页小于总页数的时候
                    if (currentPage <= totalPage) {
                        query();
                    } else {
                        //已经到最后一页
                        $(document).dialog({
                            type: "notice",
                            infoText: "到底了........",
                            autoClose: 1000,
                            position: "bottom" //在底部显示
                        })
                    }
                }
            })

        })
        
    </script>

</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="index.html">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
        <div class="col-10">
            <div class="input-group-sm search">
                <input class="form-control searchBtn" placeholder="搜索资讯">
            </div>
        </div>
    </div>
</div>

<div class="container news" id="news">

    <div class="news">
        <h6 class="news-title">骡窝日报 </h6>
        <div class="row" render-loop="list">
            <div class="col-6">
                <a data-href="newsContent.html?id=" render-fun="setHref" render-key="list.id">
                    <img class="rounded" width="100%" height="110px"
                         render-src="list.coverUrl">

                <div class="caption">
                    <p>
                        <span render-html="list.title"></span>
                        <i class="fa fa-heart-o"></i>
                    </p>
                   <!-- <a data-href="newsContent.html?id=" render-fun="setHref" render-key="list.id">-->
                        <p render-html="list.subTitle"></p>
                   <!-- </a>-->
                </div>
                </a>
            </div>
        </div>
    </div>
</div>


</body>
</html>